<template>
    <div>
        <c-header :p-title="'文章列表'">
            <div class="d-flex justify-content-end align-items-center">
                <button class="btn btn-sm btn-success m-r-sm" type="button" @click="editDetail({},false)">添加文章</button>
                <!-- <button class="btn btn-sm btn-primary m-r-sm" @click="importFile">导入更新文档</button> -->
                <button type="button" class="btn btn-sm btn-info d-lg-block"  @click="$router.go(-1)"><i class="fa fa-mail-reply m-r-sm"></i>返回</button>
                <btn-refresh class='m-l-15' :p-data='init'></btn-refresh>
            </div>
        </c-header>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="panel-heading  search-heading">
                            <!-- <small class="text-muted">搜索筛选项：</small> -->
                            <div class="m-b-sm">
                                <form class="clearfix" action="javascript:void(0)">
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">标题：</label>
                                        <Input class='thumb-search' v-model="search.name" placeholder="请输入姓名"/>
                                    </div>
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">状态：</label>
                                        <Input class='thumb-search' v-model="search.phone" placeholder="请输入电话"/>
                                    </div>
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">分类：</label>
                                        <Input class="thumb-search" v-model="search.organization" placeholder="请输入公司名称" />
                                    </div>
                                    <div class="pull-left m-r m-t-sm">
                                        <label class="control-label">备注时间：</label>
                                        <DatePicker type="datetimerange" :value='cDocDate' format="yyyy-MM-dd HH:mm:ss" placeholder="起止时间" @on-change='docSelectStartEndDate' style="width: 300px"></DatePicker>
                                    </div>
                                    <button class="btn btn-sm btn-success m-r-sm" type="button">检索</button>
                                    <button class="btn btn-sm btn-success m-r-sm" type="button">重置</button>
                                
                                </form>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                              <div class="col-lg-12">
                                  <div class="card">
                                      <div class="card-body">
                                          <div class="table-responsive"  v-if='list'>
                                              <table class="vm table color-bordered-table base-bordered-table table-bordered table-hover">
                                                  <thead>
                                                  <tr class="nowrap">
                                                      <th>ID</th>
                                                      <th>文章类型</th>
                                                      <th>标题</th>
                                                      <th>缩略图</th>
                                                      <th>阅读数</th>
                                                      <th>状态</th>
                                                      <th>日期</th>
                                                      <th width="60">操作</th>
                                                  </tr>
                                                  </thead>
                                                  <tbody  v-show='list.length'>
                                                  <tr v-for="(item,key) in list">
                                                      <td>{{item.id}}</td>
                                                      <td>{{item.name}}</td>
                                                      <td>{{item.title}}</td>
                                                      <td>{{item.organization}}</td>
                                                      <td>{{item.catalog}}</td>
                                                      <td><status-label :p-data="item.role_id" p-name='role' :p-far='true'></status-label></td>
                                                      <td><status-label :p-data="item.status" p-name='worker_status' :p-far="true"></status-label>{{item.created_at}}</td>
                                                      <td class="no-h-bg">
                                                          <div class="table-edit-group">
                                                              <Tooltip content="编辑" placement="top">
                                                                  <button class="btn btn-sm btn-success m-l-sm"  @click='editDetail(item,true)'><i class="fa fa-edit"></i></button>
                                                              </Tooltip>
                                                              <button v-if="item.status=='0'" class="btn btn-sm btn-success m-l-sm" @click="editStatus('on',item)">上线</button>
                                                              <button v-if="item.status=='1'" class="btn btn-sm btn-danger m-l-sm" @click="editStatus('off',item)">下线</button>

                                                             <!--  <button v-if="item.status=='-1'" class="btn btn-sm btn-success m-l-sm" @click="editStatus('ok',item)">通过</button>
                                                              <button v-if="item.status=='-1'" class="btn btn-sm btn-danger m-l-sm" @click="editStatus('inject',item)">拒绝</button> -->

                                                              <button class="btn btn-sm btn-dark m-l-sm" @click="editStatus('pwd',item)">查看</button>
                                                          </div>
                                                      </td>
                                                  </tr>
                                                  </tbody>
                                              </table>
                                              <div  v-show='!list.length' class="text-center m-b-sm">
                                                  暂无数据！
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                        <hr/>
                        <footer class="panel-footer">
                            <CPage class="pull-right" :total="search.page_total"
                                   :current='search.page_current'
                                   :page-size='search.page_row'
                                   @on-change='pageCurrentChange'
                                   @on-page-size-change='pageRowChange'>
                            </CPage>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
       <!--  <operate-save ref="operate_save" @on-change="initSubmit"></operate-save>
        <operate-org ref="operate_org" @on-change="initSubmit"></operate-org>
        <operate-import ref="operate_import" @on-change="initSubmit"></operate-import> -->
    </div>
</template>
<script>
    import serCustomer from '../../serves/api-customer'
    import richTable from './RichTable'
    import operateSave from './saveInset'
    import operateOrg from './OperateOrg.vue'
    import operateImport from './OperateImport.vue'
    const __page_key = 'customer.list';
    let searchDef = {
        name:'',
        phone:'',
        status:'1',
        standing:"",
        organization:'',
        contacts_org:'',
        page_row:'',
        page_current:'',
        page_total:''
    };
    export default{
        components:{
            richTable,
            operateSave,
            operateOrg,
            operateImport,
        },
        data(){
            return{
                total_customer:0,
                last_update:'',
                list:undefined,
                search:{},
                selList:[]
            }
        },
        computed:{
             cDocDate(){
                // return [this.doc.start_time,this.doc.end_time]
            },
        },
        beforeMount(){
            this.searchReset();
        },
        mounted(){
            this.init();
        },
        methods:{
            searchReset(update,pageState){
                if(pageState){
                    this.$clientPage.def(this.search);
                    return false
                }
                const _p=this.$clientPage.getData(__page_key);
                if(_p){
                    this.$set(this,'search',_p);
                }else{
                    this.$set(this,'search',Object.assign({},searchDef));
                    this.$clientPage.def(this.search);
                }
                if(update){
                    this.init();
                }
            },
            docSelectStartEndDate(value){
                this.$set(this.doc,'start_time',value[0]);
                this.$set(this.doc,'end_time',value[1]);
            },
            searchPage(page){
                this.$clientPage.set(this.search,page);
            },
            searchChange(){
                this.$clientPage.def(this.search);
                this.init();
            },
            pageRowChange(num){
                if(num!= this.search.page_row){
                    this.$set(this.search,'page_row',num);
                    if(this.search.page_current == 1){
                        this.init();
                    }
                }
            },
            pageCurrentChange(current){
                if(current!= this.search.page_current){
                    this.$set(this.search,'page_current',current);
                    this.init();
                }
            },
            linkPageChange(name,params,query){
                this.$clientPage.setData(__page_key,Object.assign({},this.search));
                if(name){
                    this.$router.push({name:name,params:params,query:query})
                }
            },
            //------------------------------------------------------------------------
            async init(data){
                let res = await serCustomer.list({});

                this.selList = [];
                this.total_customer = res.addtion_data&&res.addtion_data.total_come||0;
                this.last_update = res.addtion_data&&res.addtion_data.last_update||'';
                if(res.code==1){
                    this.list = res.data||[];
                    this.searchPage(res.addtion_data&&res.addtion_data.page_info);
                }else{
                    this.list = [];
                    this.searchReset(undefined,true);
                    this.$Message.error(res.message);
                }
                return true;
            },
            searchSelectStatus(value){
                this.$set(this.search,'status',value);
            },
            searchSelectStanding(value){
                this.$set(this.search,'standing',value);
            },
            selectChange(value){
                this.$set(this,'selList',value);
            },
            editDetail(data,edit){
                this.$router.push({ name:'articalEdit'});
                console.log(data)
                // this.$refs['operate_save'].handleOpen(Object.assign({_type:edit?'edit':'add',_role:"manager"},data))

            },
            editOrg(){
                this.$refs['operate_org'].handleOpen({
                    ids:this.selList
                })
            },
            initSubmit(state){
                if(state){
                    this.init()
                }
            },
            importFile(){
                this.$refs['operate_import'].handleOpen({})
            },
            exportFile(){
                serCustomer.exportFile(this.search);
            },
        }
    }
</script>